va-checkbox and va-radio-option: Improved a11y #1442

Andrew565 · 2024-12-19T16:38:07Z

Chromatic

https://3363-redo-radios-and-checks--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Closes #3363

Reworks some of the HTML for the va-checkbox and va-radio-option components to be more accessible.

QA Checklist

Component maintains 1:1 parity with design mocks
Text is consistent with what's been provided in the mocks
Component behaves as expected across breakpoints
Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
Designer has signed off on changes (if applicable. If not applicable provide reason why)
Tab order and focus state work as expected
Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
New components are covered by e2e tests; updates to existing components are covered by existing test suite
Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before:

After:

Acceptance criteria

QA checklist has been completed
Screenshots have been attached that cover desktop and mobile screens

Definition of done

Documentation has been updated, if applicable
A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

babsdenney · 2024-12-19T19:06:11Z

@Andrew565 Could we fix the box size and radius to align with the USWDS? Attached shows the USWDS with a 20x20 square size and border radius of 2px.

The focus state in the Figma design has a gap between the focus state and the gold outline, USWDS is showing the same thing. Could we follow that design for the focus state. The USWDS also shows a gap.

Checkbox in this PR

VADS

USWDS

rsmithadhoc

@Andrew565 This looked good to me. I was able to confirm that this resolves the Axe issues. I also gave it a quick test in VoiceOver and everything sounded as expected.

One minor thing I saw was when initially tabbing to the radio group, there's an additional outline next to the first item. My guess is that a stray pseudo or hidden element might be getting styled.

babsdenney · 2024-12-20T17:46:01Z

Similar to the checkboxes, could we increase the size of the radio button to match the USWDS?

Increase the size from 16x16 to 20x20
Create a gap between the focus ring and the radio circle

VADS

USWDS

Andrew565 · 2024-12-20T21:28:17Z

@rsmithadhoc Fixed the ghost outline, thanks for pointing that out.

@babsdenney I fixed the outline gaps and made sure the sizing was consistent for both radios and checkboxes. If you inspect a non-checked checkbox or radio, it will appear in the sizing model as though it's 16x16, but this isn't including the 2px border on all sides, which raises the 'total size' to 20x20. Screenshots attached.

babsdenney · 2025-01-02T20:56:14Z

@Andrew565 That makes sense! I don't know where the sizing strays, I overlayed the USWDS elements with the VADS and you can still see that the VADS radio buttons and checkboxes are slightly smaller. It looks like the selected radio button is accurate and matches the USWDS but the selected checkbox state and unselected radio and checkbox states are smaller than USWDS.

I also am not sure if this makes a difference but the click area for the USWDS checkboxes and radio buttons is larger than the VADS checkboxes. You can click farther to the right on the UWDS elements.

This doesn't make a difference, so it is not necessary to change, but the example we use for the name is misspelled in the storybook for the radio buttons.

Andrew565 · 2025-01-03T20:10:26Z

@babsdenney Figured out that the USWDS components were 20x20 PLUS a 2px box-shadow, making them effectively 24x24, which is why the size discrepancy. Fixed this for the checkboxes and radio-options, and also fixed the "Soujourner" typo. Should be good for re-review again now.

jamigibbs · 2025-01-07T19:11:53Z

packages/web-components/src/components/va-radio-option/va-radio-option.tsx

    });
    return (
-      <div class="usa-radio">


It looks like this update will require us to diverge almost completely from the USWDS packages with these classes being removed:

usa-radio__input

usa-radio

There are similar USWDS classes for va-checkbox too.

Is it possible to keep some USWDS style for padding/margin, spacing, font-size, border-radius by keeping those USWDS classes there and just override whatever we need to override in the component stylesheet? Otherwise we will no longer be receiving any of those upstream updates.

FWIW, the usa-radio class is still there, it's just moving to the containerClass variable.

As for the rest of the classes that are changing, yes, they are diverging quite a bit from the original USWDS classes, which is why I felt it made sense to replace those classes wholesale rather than try and override them.

For the usa-radio__input vs. va-radio-option__input, as an example, in our old stylesheet we were overriding just the margin and position, the USWDS doesn't provide any other styles beyond those. In the new stylesheet, we're overriding the margin, position, height, width, border, and box-shadow properties.

In the old styles and layout, the radio button and checkbox "icons" were being generated on the labels using a ::before pseudo-element. In the new styles and layout, we're generating those "icons" on the inputs themselves.

Getting the 'tile' variant to display correctly likewise required moving the styles to the div container, rather than having them live with the label element, due to the label not encompassing the input element.

So we aren't really getting anything useful from USWDS for these elements any more, so I don't see us needing to receive any upstream updates, unless USWDS completely restructures these components in a way similar to how we've done it.

@jamigibbs Following up on this, did you have any further questions or concerns?

Sorry I lost track of this one @Andrew565! We were discussing if these changes should be put on hold for the time being for a few different reasons and then I lost track of things. Here is where we're at I believe:

The work you did before by adding role="radio" and role="checkbox" fixed the original Voice Control issue.

The ticket you created for USWDS about the original Voice Control issue has movement and it's possible they could be providing a fix that we could just consume.

The ticket this PR is addressing is not a P0 a11y issue (it's not blocking) but a fix requires us to diverge from USWDS. Diverging causes a concerns about not getting any more updates but it also it means we'd have to come back and revert these changes to sync back up with them later.

I think there was a lot of effort put into this work so I definitely don't want to minimize the accomplishment but I'm wondering if it's a good use of our time making these changes now just to come back to sync the components back up with USWDS especially if your original solution allowed Voice Control to work for the time being.

Correct me if I haven't summarized this right though @babsdenney @micahchiang

Thanks Jami. For Micah and Barb, even though this issue isn't a P0, it is causing issues with Axe and causing screen readers to report twice as many options as there are supposed to be (see attached screenshot from Laura). I agree that making a change now and then making a change again once USWDS fixes the issue is less than ideal, but I must disagree that it's not still worth doing. There's no guarantees as to how quickly USWDS will be able to fix this and release it.

Thanks @Andrew565! I didn't notice that comment before. That problem does seem to have a higher priority than what was mentioned in the ticket description. And it looks like they were able to verify it in Storybook too with MacOS VoiceOver.

So I think at this point I agree with you about the update resolving the miscounting.

@Andrew565 I had one more hail mary thought; was the original a11y issue a blocking issue? The one that we added the role="radio" and role="checkbox" attributes for? Could we possibly remove those attributes and then wait for USWDS to make their fix if that problem wasn't a blocker?

The original issue was an accessibility issue, yes. USWDS's original styles take the checkbox and radio inputs and move them -999px to the left (i.e. off-screen), which made them unclickable.

babsdenney · 2025-01-14T18:29:05Z

This is looking good Andrew! Thank you! We found some design differences between our radio buttons/checkboxes and the USWDS.

Checkboxes:

The border-radius seems off. It looks like we are using the same border-radius, but the border for our checkboxes looks less rounded. Possibly something to do with the border positioning.
The hover-over cursor stays an arrow vs. changing to a hand
The click area of the USWDS stretches the whole width of the row vs the VADS click area is inline.
The focus border width is smaller than USWDS, but this might apply to all of our focus outlines, so this might be a nonissue.
The spacing between the checkboxes and radio buttons has more condensed spacing between the rows. I think the USWDS might be using 12px and we use 8px but maybe that is because we want to align with 8px sizing.

Radio buttons:

These look good! Similar to the checkboxes the spacing between the rows is slightly smaller and the click area is smaller. I think the radio button circles are slightly smaller but not that bad.

…checks

Andrew565 · 2025-01-16T15:53:42Z

@babsdenney Made the improvements that I could.

Checks now have a 5px border radius
Cursor now a pointer (hand) for both checks and radio options
Click area now stretches full width of element (max of 480px) for both checks and radio options
Can't change checkbox focus border width easily, it's brought in via focusable.css so it's the same focus border for everything
Adjusted spacing for checkboxes and radio options from 0.5 rem (8px) to 0.75rem (12px)

Andrew565 · 2025-01-17T18:58:33Z

@micahchiang Tested with Verdaccio, everything worked well. The only test that will need to be updated is src/applications/verify-your-enrollment/tests/e2e/mailingAddress.cypress.spec.js, and it's a one-liner change from class="usa-checkbox__label" to class="va-checkbox__label".

babsdenney · 2025-01-17T21:03:35Z

@Andrew565 This is looking great! Thank you so much for making those design changes. The default options look good now. No issues were found now but I am looking at the tile options more closely, and there are a few things to fix here.

Thank you for looking into the focus. No worries about that; it will be exciting to get DK's new styles implemented eventually.

USWDS Tiles

VADS Tiles

It looks like the tiles have 12px of space around the form element inside the tile, but between the tiles, there are 8px of space. Could we change the gap between the tiles to 8px?
When the radio or checkbox is selected, the tile's background and border change to a different color. Could we add that?
The checkbox tile has a place near the border of the tile where the hover state changes, but the tile is not selected when you click on it.

Andrew565 added 3 commits December 16, 2024 13:24

A11y improvements to va-radio-option

af9911f

Checkbox a11y improvements

2af90f3

Updates to va-statement-of-truth tests

7131458

Andrew565 added the patch Patch change in semantic versioning label Dec 19, 2024

Andrew565 requested review from rsmithadhoc and a team December 19, 2024 16:38

Andrew565 self-assigned this Dec 19, 2024

Andrew565 requested a review from a team as a code owner December 19, 2024 16:38

rsmithadhoc approved these changes Dec 20, 2024

View reviewed changes

Andrew565 added 2 commits December 20, 2024 16:13

Design improvements

8e48555

Reverting and fixing sizing changes

c029031

Merge branch 'main' into 3363-redo-radios-and-checks

c4099af

Andrew565 added 3 commits January 3, 2025 14:22

Fixing "Soujourner" typo

c7b7c84

Fixes to size and click area for Checkboxes

5ecd194

Design fixes to radio-options

d91e841

jamigibbs reviewed Jan 7, 2025

View reviewed changes

Merge branch 'main' into 3363-redo-radios-and-checks

85f5952

Andrew565 added 4 commits January 16, 2025 10:07

Merge remote-tracking branch 'origin/main' into 3363-redo-radios-and-…

c823d02

…checks

Design improvements

553510b

Adjusting spacing between checkboxes

c3de62c

Adjusting spacing on radio-options

d60d9ad

Merge branch 'main' into 3363-redo-radios-and-checks

61ca0d1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

va-checkbox and va-radio-option: Improved a11y #1442

va-checkbox and va-radio-option: Improved a11y #1442

Andrew565 commented Dec 19, 2024 •

edited

Loading

babsdenney commented Dec 19, 2024 •

edited

Loading

rsmithadhoc left a comment

babsdenney commented Dec 20, 2024

Andrew565 commented Dec 20, 2024

babsdenney commented Jan 2, 2025

Andrew565 commented Jan 3, 2025

jamigibbs Jan 7, 2025 •

edited

Loading

Andrew565 Jan 8, 2025

Andrew565 Jan 13, 2025

jamigibbs Jan 13, 2025

Andrew565 Jan 13, 2025

jamigibbs Jan 13, 2025

jamigibbs Jan 14, 2025 •

edited

Loading

Andrew565 Jan 14, 2025

babsdenney commented Jan 14, 2025

Andrew565 commented Jan 16, 2025

Andrew565 commented Jan 17, 2025

babsdenney commented Jan 17, 2025

va-checkbox and va-radio-option: Improved a11y #1442

Are you sure you want to change the base?

va-checkbox and va-radio-option: Improved a11y #1442

Conversation

Andrew565 commented Dec 19, 2024 • edited Loading

Chromatic

Description

QA Checklist

Screenshots

Acceptance criteria

Definition of done

babsdenney commented Dec 19, 2024 • edited Loading

rsmithadhoc left a comment

Choose a reason for hiding this comment

babsdenney commented Dec 20, 2024

Andrew565 commented Dec 20, 2024

babsdenney commented Jan 2, 2025

Andrew565 commented Jan 3, 2025

jamigibbs Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Andrew565 Jan 8, 2025

Choose a reason for hiding this comment

Andrew565 Jan 13, 2025

Choose a reason for hiding this comment

jamigibbs Jan 13, 2025

Choose a reason for hiding this comment

Andrew565 Jan 13, 2025

Choose a reason for hiding this comment

jamigibbs Jan 13, 2025

Choose a reason for hiding this comment

jamigibbs Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Andrew565 Jan 14, 2025

Choose a reason for hiding this comment

babsdenney commented Jan 14, 2025

Checkboxes:

Radio buttons:

Andrew565 commented Jan 16, 2025

Andrew565 commented Jan 17, 2025

babsdenney commented Jan 17, 2025

Andrew565 commented Dec 19, 2024 •

edited

Loading

babsdenney commented Dec 19, 2024 •

edited

Loading

jamigibbs Jan 7, 2025 •

edited

Loading

jamigibbs Jan 14, 2025 •

edited

Loading